<!DOCTYPE html>
<html lang="zh-cn">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>购物车</title>
	<link rel="stylesheet" href="css/style.css">
	<script src="./js/data.js"></script>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<style>
	.grey {
		background-color: rgb(230, 224, 224);
	}
	img{
		margin-bottom: -15px;
	}
	h1 {
    display: inline-block;
	margin-left: 10px;
	margin-bottom: 10px;
	margin-top: 50px;
}

</style>
<body>
	<div id="app"></div>
	<template id="root">
		<div id="shopcart" class="shop-cart">
			<div class="tabs">
				<div class="border">
					<img src="img/小米图标.png">
						<h1>我的购物车</h1>
					
					<div class="line"></div>
				</div>
			</div>

			<div class="lists">
				<div class="header">
					<ul class="clearfix">
						<li>
							<input type="checkbox" class="select-all" v-model="checkAll" @change="modifyCheckAll">
							<label>全选</label>
						</li>
						<li class="product-info">商品名称</li>
						<li>单价</li>
						<li>数量</li>
						<li>小计</li>
						<li>操作</li>
					</ul>
				</div>
				<div>
					<div class="shop">
						<div class="products">
							<div class="item" v-for="p in products" :class="[p.isChecked?'':'grey']">
								<div class="select-logo">
									<input type="checkbox" class="but" v-model="p.isChecked" @change="modifyProduct(p)">
									<img :src="p.topImg" alt="产品logo">
								</div>
								<div class="product-detail">
									<div class="left">
										<a href="#" class="product-name">
											{{p.productName}}
										</a>
									</div>
								</div>
								<div class="price">
									<p class="real-price">￥{{p.price}}元</p>
								</div>
								<div class="count">
									<span class="sub" @click="decrement(p)">-</span>&nbsp;
									<span class="input"><input type="text" v-model="p.count"></span>&nbsp;
									<span class="add" @click="increment(p)">+</span>
								</div>
								<div class="amount">￥{{p.count*p.price}}元</div>
								<div class="delete">
									<a href="#" @click="removeProduct(p)">×</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="operate">
				<div class="left">
					<a href="javascript:void(0);">继续购物</a>
				</div>
				<div class="weizhi">已选择商品<span class="selected-count">{{totalNum}}</span>件</div>
				<div class="right">
					<div class="amount" style="color: rgb(243, 123, 19);">合计：<span class="sum">￥{{totalPrice}}元</span>
					</div>
					<a href="javascript:void(0);" class="settle" style="background-color: rgb(243, 123, 19);">结算</a>
				</div>
			</div>
		</div>
	</template>
	<!-- 209001011 文连宇 -->
	<script>
		const app = Vue.createApp({
			template: "#root",
			//数据
			data() {
				return {
					products,
					checkAll: false,
				}
			},
			// 计算
			computed: {
				totalPrice() {
					let sum = 0
					this.products.forEach((p) => {
						if (p.isChecked) {
							sum += p.count * p.price
						}
					})
					return sum
				},
				// 总数
				totalNum() {
					let num = 0
					this.products.forEach((p) => {
						if (p.isChecked) {
							num += p.count
						}
					})
					return num
				}
			},
			// 方法
			methods: {
				// 增加
				increment(p) {
					p.count++
				},
				// 减少
				decrement(p) {
					if (p.count > 0) {
						p.count--
					}
				},
				// 删除商品
				removeProduct(p) {
					this.products.splice(this.products.indexOf(p), 1)
				},
				// 识别是否全选
				modifyCheckAll() {
					this.isChecked = this.checkAll
					this.products.forEach((p) => {
						p.isChecked = this.checkAll
					})
				},
				// 变更产品
				modifyProduct(p) {
					this.isChecked = this.products.length == this.products.filter((p) => { return p.isChecked == true }).length
				}
			}

		})
		// 挂载到应用实例上
		app.mount("#app")
	</script>
</body>

</html>